<template>
    <div class="search-to" :style="style">
        <div class="search-top">
            <div class="search-box">
                <div class="search-input">
                    <input class="input" :placeholder="holderText" v-model="searchName" />
                </div>
                <svg class="icon-qk" aria-hidden="true" v-if="hasContent" @click="clear">
                    <use xlink:href="#icon-photo-close" />
                </svg>
            </div>
            <div class="search-confirm" @click="confirm">搜索</div>
        </div>
        <div class="search-history">
            <div class="history-title">
                <div>历史搜索</div>
                <svg class="icon-schu" aria-hidden="true" @click="del">
                    <use xlink:href="#icon-shanchu" />
                </svg>
            </div>
            <div class="history-content">
                <div
                    class="single-history"
                    v-for="(item, key) in history"
                    :key="key"
                    @click="historySearch(item)"
                >{{item}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    const HEIGHT = document.documentElement.clientHeight - 30 + "px";
    export default {
        name: "search",
        data() {
            return {
                style: {
                    height: HEIGHT
                },
                holderText: "请输入商品名称",
                type: "", //搜索商品类型
                searchName: "",
                refineType: ""
            };
        },
        created() {},
        computed: {
            history() {
                let system = JSON.parse(this.$store.state.login.system);
                system = JSON.stringify(system).substring(0, 1);
                let his = this.$store.state.user.searchHistory[system];
                console.log("search-history,", his);
                return his;
            },
            hasContent() {
                let show = this.searchName != "" ? true : false;
                return show;
            }
        },
        methods: {
            confirm() {
                if (this.searchName) {
                    let data = {};
                    data.goodname = this.searchName;
                    let sys = JSON.parse(this.$store.state.login.system);
                    sys = JSON.stringify(sys);
                    data.system = sys.substring(0, 1);
                    console.log("system", sys);
                    //将搜索词存入搜索历史缓存
                    this.$store.commit("searchHistory", data);
                    console.log("search-confirm", data);
                    this.$router.push({
                        name: "search-result",
                        params: {
                            searchData: data
                        }
                    });
                }
            },
            historySearch(name) {
                this.searchName = name;
                this.confirm();
            },
            clear() {
                this.searchName = "";
            },
            del() {
                let sys = JSON.parse(this.$store.state.login.system);
                sys = JSON.stringify(sys);
                sys = sys.substring(0, 1);
                this.$store.commit("delSearchHistory", sys);
            }
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    .search-to {
        width: vw(345);
        padding: cellPadding;
        background-color: grayF;
        overflow-y: hidden;
    }

    .search-top {
        display: flex;
        flex-direction: row;
    }

    .search-confirm {
        display: flex;
        justify-content: center;
        align-items: center;
        height: vw(30);
        word-vw(word14, gray3);
        line-height: vw(19);
        margin-left: vw(8);
    }

    .search-box {
        height: vw(28);
        width: vw(305);
        border: 1px solid main-color;
        border-radius: all-radius;
        display: flex;
        align-items: center;

        & .qb {
            width: vw(15);
            height: vw(15);
            overflow: hidden;
            fill: main-color;
            margin-left: middleMargin;
        }

        .icon-qk {
            width: vw(15);
            height: vw(15);
            overflow: hidden;
            fill: gray9;
        }
    }

    .search-input {
        /* border salmon 1px solid */
        word-vw(word12, main-color);
        margin-left: middleMargin;
        width: 75%;

        input {
            width: 100%;
        }
    }

    .search-history {
        margin-top: cellPadding;
        word-vw(word12, gray3);

        .history-title {
            width: 100%;
            height: vw(25);
            flex-x();

            .icon-schu {
                width: vw(15);
                height: vw(15);
                fill: gray9;
            }
        }

        .history-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .single-history {
                background-color: grayF;
                border: 1px solid gray9;
                text-align: center;
                height: vw(28);
                line-height: vw(28);
                padding: 0 vw(5);
                border-radius: all-radius;
                margin-right: smallMargin;
                margin-top: vw(20);
                min-width: vw(74);
            }
        }
    }
</style>
